import * as React from 'react';
import {observer} from 'mobx-react'
import styles from './index.scss';

import ScatterTime from '../../../home/ScatterTime'
import ScatterFive from '../../../home/ScatterFive'
import ScatterDoubleD from '../../../home/ScatterDoubleD'
import ScatterTimeSingleY from '../../../home/ScatterTimeSingleY'

interface IProps {
    isDoubleY: string
    title?: string// 标题
    dataY1?: number[][]
    dataY2?: number[][]
    dataY3?: number[][]
    dataY4?: number[][]
    dataY5?: number[][]
    legend?: string[]
    max?: number
    min?: number
}


@observer
class Home extends React.Component<IProps> {

    constructor(props) {
        super(props);
    }


    public render() {
        const {title, dataY3, dataY1, dataY2, isDoubleY, dataY4, dataY5, legend, max, min} = this.props
        return (
            <div className={styles.scatter}>
                <div className={styles.title}>{title}</div>
                <div className={styles.EChart}>
                    {
                        isDoubleY === 'double' ?
                            <ScatterTime max={max} min={min} legend={legend} dataY1={dataY1} dataY2={dataY2} dataY3={dataY3}/>
                            :
                            isDoubleY === 'single' ?
                                <ScatterTimeSingleY max={max} min={min} dataY1={dataY1} dataY2={dataY2} dataY3={dataY3} legend={legend}/>
                                :
                                isDoubleY === 'doubleD' ?
                                    <ScatterDoubleD dataY1={dataY1} dataY2={dataY2} legend={legend}/>
                                    :
                                    <ScatterFive dataY1={dataY1} dataY2={dataY2} dataY3={dataY3} dataY4={dataY4}
                                                 legend={legend}
                                                 dataY5={dataY5}/>
                    }
                </div>
            </div>
        );
    }
}

export default Home;
